<template>
	<view class="contain">
		<view class="history">
			Ai合成历史记录
		</view>
		<!-- 暂无记录~ -->
		<view style="margin-top: 50%;" v-if="AiavatList.length == 0">
			<tn-empty mode="data" size="sm" />
		</view>
		<!-- 历史图片 -->
		<view class="historyPhoto">
			<view class="historyPhotos" v-for="item in AiavatList" :key="item.attId">
				<image :src="getImgUrl(item.sattDir)" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import
	getImgUrl
	from "@/config/img.js"
	import {
		UserAiavatarListApi
	} from '@/api/photograph.js'
	import {
		onMounted,
		ref
	} from 'vue'
	onMounted(() => {
		loadData()
	})
	//获取数据
	const AiavatList = ref([])
	const loadData = () => {
		UserAiavatarListApi({
			limit: 20,
			page: 1
		}).then(res => {
			AiavatList.value = res.data.list
		})
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;

		.history {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			font-weight: 600;
		}

		.historyPhoto {
			width: 100%;
			height: 680rpx;
			// background-color: #f0f0f0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			align-items: flex-start;
			justify-content: flex-start;
			margin-left: 4rpx;

			.historyPhotos {
				width: 32%;
				height: 220rpx;
				// background-color: pink;
				margin: 5rpx;
				/* #ifdef H5 */
				margin: 15rpx 5rpx;

				/*#endif*/
				/* #ifdef H5 */
				image {
					width: 100%;
					height: 100%;
				}

				/*#endif*/
			}
		}
	}
</style>